<template>
  <a-card title="菜单权限" style="width: 100%">
    <a slot="extra" href="javascript:void(0)" @click="showModal('insert',{})">添加</a>
    <a-table :loading="isloading" :columns="columns" :pagination="false" :data-source="menuPage.data" rowKey="id">
<!--    <span slot="customTitle"><a-icon type="smile-o" /> Name</span>-->
<!--      菜单是否可用-->
    <span slot="available" slot-scope="available">
      <a-tag
          :color="available === 1 ? 'green':'red'"
      >
        {{ available === 1 ? '可用' : '不可用' }}
      </a-tag>
    </span>
<!--      图标-->
    <span slot="icon" slot-scope="icon">
        <a-icon :type="icon" />
    </span>
<!--      是否展开-->
    <span slot="spread" slot-scope="spread">
        {{ spread === 1 ? '展开' : '不展开' }}
    </span>
<!--      操作-->
    <span slot="action" slot-scope="text, record">
<!--      <a>Invite 一 {{ record.id }}</a>-->
      <a-space>
        <a-button type="primary"
                  @click="clickHandler('edit',record)" size="small" icon="edit" title="编辑"></a-button>
        <a-button type="danger"
                  size="small"
                  icon="delete"
                  title="删除"
                  @click="clickHandler('remove',record)"
                  :disabled="record.parentId === 0 || record.isUser === 1"></a-button>
      </a-space>
    </span>

      <template slot="footer">
        <a-pagination
            style="text-align: end"
            v-model="menuPage.pageNum"
            :page-size-options="['2', '4', '5']"
            :total="menuPage.total"
            show-size-changer
            :page-size="menuPage.pageSize"
            @showSizeChange="onPageSizeChangeHandler"
            @change="onPageChangeHandler"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </template>
    </a-table>
<!--    编辑模态框-->
    <a-modal
        :title="ModalText"
        :visible="visible"
        :confirm-loading="confirmLoading"
        okText="确认"
        okType="primary"
        cancelText="放弃"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="菜单名">
          <a-input
              :disabled="currentMenu.target === '1'"
              v-decorator="['title', {
                initialValue: currentMenu.title,
                rules: [{ required: true, message: '请输入标题!' }] }]"
          />
        </a-form-item>

        <a-form-item label="父菜单">
          <a-select :disabled="currentMenu.target === '1'"
                    v-if="currentMenu.target === '1'"
                    v-decorator="[
              'parentId',{
                initialValue: currentMenu.parentId}]">
            <a-select-option :value="1">
              1 <a-divider type="vertical" />
              资源共享平台
            </a-select-option>
          </a-select>

          <a-select v-else-if="currentMenu.target === '2'"
              v-decorator="[
              'parentId',{
                initialValue: currentMenu.parentId,
                rules: [{ required: true, message: '选择父菜单!' }] }]">
            <a-select-option :value="1">
              1 <a-divider type="vertical" />
              资源共享平台
            </a-select-option>
          </a-select>

          <a-select v-else
                    v-decorator="[
              'parentId',{
                initialValue: currentMenu.parentId,
                rules: [{ required: true, message: '选择父菜单!' }] }]">
            <a-select-option v-for="menu in parentMenuList" :key="menu.id" :value="menu.id">
              {{ menu.id }}
              <a-divider type="vertical" />
              {{ menu.title }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="是否基本菜单">
          <a-select :disabled="currentMenu.target === '1'"
                    v-if="currentMenu.target === '1'"
                    v-decorator="[
              'isUser',{
                initialValue: currentMenu.isUser}]">
            <a-select-option :value="0">
              顶级菜单不可更改
            </a-select-option>
          </a-select>

          <a-select v-else
                    v-decorator="[
              'isUser',{
                initialValue: currentMenu.isUser,
                rules: [{ required: true, message: '请选择是否基本菜单!' }] }]">
            <a-select-option :value="1">
               是
            </a-select-option>
            <a-select-option :value="0">
               不是
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="等级">
          <a-select :disabled="currentMenu.target === '1'"
                    v-if="currentMenu.target === '1'"
                    v-decorator="[
              'target',{
                initialValue: currentMenu.target}]">
            <a-select-option value="1">
              顶级菜单不可更改
            </a-select-option>
          </a-select>

          <a-select v-else-if="currentMenu.target === '2'"
                    v-decorator="[
              'target',{
                initialValue: currentMenu.target,
                rules: [{ required: true, message: '选择菜单等级!' }] }]">
            <a-select-option value="2">
              2级菜单
            </a-select-option>
          </a-select>

          <a-select v-else-if="form.getFieldValue('parentId') === 1"
                    v-decorator="[
              'target',{
                initialValue: currentMenu.target,
                rules: [{ required: true, message: '选择菜单等级!' }] }]">
            <a-select-option value="2">
              2级菜单
            </a-select-option>
          </a-select>

          <a-select v-else-if="form.getFieldValue('parentId') !== 1"
                    v-decorator="[
              'target',{
                initialValue: currentMenu.target,
                rules: [{ required: true, message: '选择菜单等级!' }] }]">
            <a-select-option value="3">
              3级菜单
            </a-select-option>
          </a-select>

          <a-select v-else
                    v-decorator="[
              'target',{
                initialValue: currentMenu.target,
                rules: [{ required: true, message: '选择菜单等级!' }] }]">
            <a-select-option value="2">
              2级菜单
            </a-select-option>
            <a-select-option value="3">
              3级菜单
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="路由地址">
          <a-input v-if="currentMenu.target === '3' || currentMenu.target === undefined"
              v-decorator="['href', {
                initialValue: currentMenu.href,
                rules: [{ required: true, message: '请输入路由地址!' }] }]"
          />
          <a-input v-else :disabled="currentMenu.target === '2' || form.getFieldValue('target') === '2'"
                   v-decorator="['href', {
                initialValue: currentMenu.href}]"
          />
        </a-form-item>

        <a-form-item label="图标">
          <a-input
              @change="iconChange"
              v-decorator="['icon', {
                initialValue: currentMenu.icon }]"
              placeholder="输入图标">
            <a-tooltip slot="suffix" title="图标展示">
              <a-icon :type="currentMenu.icon || 'default'" style="color: rgba(0,0,0,.45)" />
            </a-tooltip>
          </a-input>
        </a-form-item>

        <a-form-item label="是否可用">
          <a-select
              v-if="currentMenu.target === '1'"
              disabled
              v-decorator="[
              'available',{
                initialValue: currentMenu.available,
                rules: [{ required: true, message: '选择是否可用!' }] },
        ]"
              placeholder="请选择是否可用"
          >
            <a-select-option :value="1">
              可用
            </a-select-option>
          </a-select>
          <a-select
              v-else
              v-decorator="[
              'available',{
                initialValue: currentMenu.available,
                rules: [{ required: true, message: '选择是否可用!' }] },
        ]"
              placeholder="请选择是否可用"
          >
            <a-select-option :value="1">
              可用
            </a-select-option>
            <a-select-option :value="0">
              不可用
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import {getMenuList, getParentMenuIdList, removeMenu, updateMenu} from "@/api/menu";
import {DEFAULT_PAGENUM, DEFAULT_PAGESIZE} from "@/constent";
  const columns = [
    {
      title: '菜单编号',
      dataIndex: 'id',
      key: 'id',
      align:'center',
      scopedSlots: { customRender: 'id' },
    },
    {
      title: '菜单标题',
      dataIndex: 'title',
      key: 'title',
      align:'center',
      slots: { title: 'customTitle' },
      scopedSlots: { customRender: 'title' },
    },
    {
      title: '父菜单',
      dataIndex: 'parentId',
      key: 'parentId',
      align:'center',
    },
    {
      title: '路由地址',
      dataIndex: 'href',
      key: 'href',
      align:'center',
    },
    {
      title: '菜单图标',
      dataIndex: 'icon',
      key: 'icon',
      align:'center',
      scopedSlots: { customRender: 'icon' },
    },
    {
      title: '是否展开',
      dataIndex: 'spread',
      key: 'spread',
      align:'center',
      scopedSlots: { customRender: 'spread' },
    },
    {
      title: '是否可用',
      key: 'available',
      align:'center',
      dataIndex: 'available',
      scopedSlots: { customRender: 'available' },
    },
    {
      title: '操作',
      key: 'action',
      align:'center',
      scopedSlots: { customRender: 'action' },
    },
  ];
  export default {
    name: "MenuList",
    data(){
      return {
        ModalText:'',
        isloading: false,
        parentMenuList:[],
        menuPage:{
          total:20,
          pageNum:DEFAULT_PAGENUM,
          pageSize:DEFAULT_PAGESIZE,
        },
        columns,
        queryParam:{
          pageSize:DEFAULT_PAGESIZE,
          pageNum:DEFAULT_PAGENUM
        },
        // 编辑模态框是否显示
        visible: false,
        // 确认加载中
        confirmLoading: false,
        // 编辑菜单
        currentMenu:{},
        formLayout: 'horizontal',
        form: this.$form.createForm(this, { name: 'coordinated' }),
      }
    },
    created() {
      this.getMenus();
    },
    mounted() {
      // 加载父ids
      this.getParantIds();
    },
    watch:{
      // 监视参数变化
      queryParam:{
        immediate:true,
        deep:true,
        handler(){
          this.getMenus();
        }
      }
    },
    methods:{
      // 获取菜单
      async getMenus(){
        this.isloading = true;
        const { pageNum,pageSize } = this.queryParam;
        const result = await getMenuList(pageNum,pageSize);
        const { code,data,msg } = result;
        if (code === 200){
          this.isloading = false;
          this.menuPage = data;
        } else {
          this.$message.error(msg);
        }
      },
      // 获取父ids
      async getParantIds(){
        const result = await getParentMenuIdList();
        const { code,data,msg } = result;
        if (code === 200){
          this.parentMenuList = data;
        } else {
          this.$message.error(msg);
        }
      },
      // 点击处理器
      clickHandler(opera,recode){
        if('edit' === opera){
          this.showModal('edit',recode);
        } else if('remove' === opera){
          this.remove(recode);
        }
      },
      // 删除菜单
      remove(record){
        const _this = this;
        this.$confirm({
          title: '删除菜单',
          content: record.target === '3' ? '确认删除此菜单?' : '此操作将会删除该菜单及所有子菜单,请谨慎操作?',
          okText: '确认',
          okType: 'danger',
          cancelText: '放弃',
          onOk() {
            removeMenu(record.id).then(res => {
              const { code,msg } = res;
              if (code === 200){
                _this.$message.success(msg);
                _this.getMenus();
                _this.$store.dispatch('getMenuList');
              } else {
                _this.$message.error(msg);
              }
            }).catch(error => {
              console.log(error);
              _this.$message.error("操作异常");
            })
          },
          onCancel() {
            console.log("取消了删除");
          },
        });
      },
      // 展示编辑模态框
      showModal(type,recode) {
        this.currentMenu = recode;
        if ('edit' === type){
          this.ModalText = '编辑菜单';
          this.visible = true;
        } else if ('insert' === type){
          this.ModalText = '添加菜单';
          this.visible = true;
        }
      },
      // 点击了确定
      handleOk(e) {
        const _this = this;
        this.form.validateFields(async (err, values) => {
          if (!err) {
            _this.ModalText = '正在处理中...';
            _this.confirmLoading = true;
            let menu = {...values,id:_this.currentMenu.id};
            const result = await updateMenu(menu);
            const {code,msg} = result;
            if (code === 200){
              _this.$message.success(msg);
              _this.getMenus();
              _this.$store.dispatch('getMenuList');
            } else {
              _this.$message.error(msg);
            }
            setTimeout(() => {
              _this.visible = false;
              _this.confirmLoading = false;
              _this.currentMenu = {};
              _this.form.resetFields();
            }, 1000);
          }
        });
      },
      // 点击了取消
      handleCancel(e) {
        console.log('Clicked cancel button');
        this.visible = false;
      },
      // 图标变化
      iconChange(e){
        this.currentMenu.icon = e.target.value;
      },
      handleSelectChange(value) {
        console.log(value);
        this.form.setFieldsValue({
          note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
        });
      },

      /**
       * 每页显示条数改变回调
       * @param current
       * @param pageSize
       */
      onPageSizeChangeHandler(current, pageSize) {
        this.queryParam.pageSize = pageSize;
        this.queryParam.pageNum = DEFAULT_PAGENUM;
      },

      /**
       * 当前页改变回调
       * @param current
       * @param pageSize
       */
      onPageChangeHandler(current){
        this.queryParam.pageNum = current;
      },
    }
  }
</script>

<style scoped>

</style>
